<template>
	<view class="container">
		<view class="map-box">
			<view class="map-top">
				<swiper class="dswiper" circular :autoplay="true" :interval="5000" :current="current"
					@change="swiperchange">
					<swiper-item v-for="(item,index) in mapDetail.introductionUrlList" :key="index">
						<view class="swiper-item ">
							<img-item class="swiper-img" :src="item"></img-item>
						</view>
					</swiper-item>
				</swiper>
				<view v-if="mapDetail.introductionUrlList.length" class="swiper_num">
					{{current+1}}/{{mapDetail.introductionUrlList.length}}
				</view>
			</view>
			<view class="map-info" v-if="mapDetail">
				<view class="p1">{{mapDetail.name}}</view>
				<view class="p2" @tap="phonetap(mapDetail)">
					<text>联系方式：{{mapDetail.mobile}}</text>
					<text class="iconfont icon-phone"></text>
				</view>
				<view class="p3">
					<view class="lab">开放时间：</view>
					<view class="timeClass">
						<text class="text" v-for="(itm,indx) in mapDetail.openTimeList" :key="indx">
							{{intToWord(itm.week)}} {{itm.startTime.slice(0,-3)}}-{{itm.endTime.slice(0,-3)}}
						</text>
					</view>
				</view>
				<view class="p4" @tap="locationtap(mapDetail)">
					<text>联系地址：{{mapDetail.address}}</text>
					<text class="iconfont icon-location"></text>
				</view>
			</view>
			<view class="map-introduction">
				<view class="introduction_body">
					<view class="introduction_title">场所介绍</view>
					<view class="introduction_info" :class="{open:moreshowFlag&&moreState}">
						<rich-text class="introduction_text" :nodes="introduction"></rich-text>
					</view>
				</view>
				<view class="more" v-if="moreshowFlag" @click="moreState=!moreState">{{moreState?"更多":"收起"}}简介
					<uni-icons v-show="moreState" type="bottom" color="#7F7F7F"></uni-icons>
					<uni-icons v-show="!moreState" type="top" color="#7F7F7F"></uni-icons>
				</view>
			</view>
			<view class="map-pic">
				<img-item class="map-img" v-for="(item,index) in mapDetail.introductionUrlList" :key="index" :src="item"
					mode="aspectFit"></img-item>
			</view>
		</view>
		<view class="map-foot">
			<view class="mapitem-button mapitem-phone" @tap="phonetap(mapDetail)">
				<text class="iconfont icon-phone"></text>
				<text>拨打电话</text>
			</view>
			<view class="mapitem-button mapitem-location" @tap="locationtap(mapDetail)">
				<text class="iconfont icon-location"></text>
				<text>立即导航</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		educationalMap,
		maphot
	} from '@/http/api.js'
	export default {
		data() {
			return {
				content: "",
				mapDetail: null,
				id: null,
				current: 0,
				introduction: "",
				imageList: [],
				imageListHeight: [],
				imgshowFlag: false,
				moreshowFlag: false,
				moreState: 1
			}
		},
		onLoad(e) {
			if (!e?.content) return
			this.content = e.content;
			let _obj = JSON.parse(decodeURIComponent(e.content));
			this.id = _obj.id;
			this.getdata();
		},
		methods: {
			getdata() {
				this.$request({
					url: educationalMap,
					data: {
						'id': this.id
					}
				}).then(res => {
					this.mapDetail = res;
					this.introduction = res.introduction;
					this.$nextTick(() => {
						this.getIntroduction();
					})
				})
			},
			getIntroduction() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.introduction_info').boundingClientRect(data => {
					// console.log(data)
					if (data.height > 78) {
						this.moreshowFlag = true;
					}
				}).exec();
			},
			swiperchange(e) {
				this.current = e.detail.current;
			},
			locationtap(e) {
				this.maphot(e, 'location');
				uni.openLocation({
					longitude: Number(e.longitude),
					latitude: Number(e.latitude),
					name: e.name,
					address: e.address,
					success: function() {
						console.log('success');
					},
					fail: function(err) {
						console.log(err);
					}
				})
			},
			phonetap(e) {
				this.maphot(e, 'phone');
				uni.makePhoneCall({
					phoneNumber: e.mobile
				});
			},
			maphot(e, type) {
				this.$request({
					url: maphot,
					data: {
						'id': e.id,
						'type': type
					}
				})
			},
			intToWord(week) {
				let day;
				switch (week) {
					case 7:
						day = "周日";
						break;
					case 1:
						day = "周一";
						break;
					case 2:
						day = "周二";
						break;
					case 3:
						day = "周三";
						break;
					case 4:
						day = "周四";
						break;
					case 5:
						day = "周五";
						break;
					case 6:
						day = "周六";
				}
				return day;
			}
		},
		// #ifdef MP-WEIXIN
		onShareAppMessage() {
			return {
				title: '场所详情',
				path: `/pages/map/detail?content=${this.content}&isRedirectUrl`
			}
		},
		// #endif
	}
</script>

<style lang="scss">
	@import "./index.scss"
</style>
